<template>
  <div>
    <TableSearch
      ref="tableSearch"
      :tableBtns="tableBtns"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
    </TableSearch>
    <AddStaffDlg
      v-if="addDlgVisible"
      :visible.sync="addDlgVisible"
      :staff-role-options="staffRoles"
      :type="dlgType"
      :select-staff="selectStaff"
      @refresh="refresh"
    />
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import AddStaffDlg from './Dialogs/AddStaffDlg'
import { staffList, listStaffRoles } from '@/api/user'
import formatter from '@/utils/format'
export default {
  name: 'StaffList',
  components: { TableSearch, AddStaffDlg },
  mounted() {
    listStaffRoles().then((res) => {
      if (Array.isArray(res)) {
        let tempArr = []
        res.forEach((item) => {
          const temp = {
            label: item.showName,
            value: item.id,
            explanation: item.explanation,
          }

          tempArr.push(temp)
        })

        this.staffRoles = tempArr
        console.log(this.staffRoles)
      }
    })
  },
  data() {
    return {
      loading: false,
      addDlgVisible: false,
      staffRoles: [],
      dlgTitle: '添加用户',
      dlgType: 'add',
      selectStaff: {},
      columns: [
        {
          label: '手机号',
          prop: 'mobile',
          resourceId: '/web/user-management/staff-management/手机号',
        },
        {
          label: '姓名',
          prop: 'userName',
          resourceId: '/web/user-management/staff-management/姓名',
        },
        {
          label: '类型',
          prop: 'type',
          formatter: (item) => {
            return item.systemUserRole?.showName
          },
          resourceId: '/web/user-management/staff-management/员工类型',
        },
        {
          label: '添加时间',
          prop: 'createTime',
          formatter,
          resourceId: '/web/user-management/staff-management/添加时间',
        },
        {
          label: '操作',
          resourceId: '/web/user-management/staff-management/操作',
          buttons: [
            {
              label: '编辑',
              size: 'small',
              class: 'table-button-green',
              resourceId: '/web/user-management/staff-management/编辑',
              click: (row) => {
                this.selectStaff = {
                  roleId: row.roleId,
                  userName: row.name,
                  id: row.id,
                  mobile: row.mobile,
                }

                this.dlgType = 'edit'
                this.addDlgVisible = true
              },
            },
            {
              label: '关联电站',
              size: 'small',
              resourceId: '/web/user-management/staff-management/关联电站',
              click: (row) => {
                this.$router.push(`/user/relationStation/${row.id}`)
              },
            },
            {
              label: '重置密码',
              size: 'small',
              class: 'table-button-blue',
              resourceId: '/web/user-management/staff-management/重置密码',
              click: (row) => {
                this.selectStaff = {
                  id: row.id,
                }
                this.dlgType = 'reset'
                this.addDlgVisible = true
              },
            },
            {
              label: '删除',
              size: 'small',
              class: 'table-button-red',
              resourceId: '/web/user-management/staff-management/删除',
              click: (row) => {
                console.log('delete')
                this.selectStaff = {
                  roleId: row.roleId,
                  userName: row.name,
                  id: row.id,
                }

                this.dlgType = 'delete'
                this.addDlgVisible = true
              },
            },
          ],
        },
      ],
      tableData: {},
      form: {},
      tableBtns: [
        {
          label: '新增',
          click: this.handleAdd,
          icon: 'el-icon-plus',
          resourceId: '/web/user-management/staff-management/新增',
        },
      ],
      searchPath: '/web/user-management/staff-management/查询',
      formItemsInline: [
        {
          type: 'text',
          value: 'userName',
          placeholder: '姓名',
          clearable: true,
          resourceId: '/web/user-management/staff-management/姓名',
        },
        {
          type: 'text',
          value: 'mobile',
          placeholder: '手机号',
          clearable: true,
          resourceId: '/web/user-management/staff-management/手机号',
        },
      ],
    }
  },
  methods: {
    handleAdd() {
      this.dlgType = 'add'
      this.selectStaff = {}
      this.addDlgVisible = true
    },
    handleTableData(params) {
      staffList(params).then((res) => {
        this.tableData = {
          list: res.list,
          totalCount: res.totalAmount,
        }
      })
    },
    reset() {
      this.form = {}
    },
    refresh() {
      this.$refs.tableSearch.refreshTable()
    },
  },
}
</script>
